<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-section">
          <h1>项目进度管理系统</h1>
          <p>高效管理您的项目进度、资源和文档</p>
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="goToLogin">登录</el-button>
            <el-button size="large" @click="goToRegister">注册</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-section">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>项目管理</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>创建和管理多个项目，设置项目里程碑和阶段，跟踪项目进度和状态。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>任务跟踪</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>分配和跟踪任务，设置优先级和截止日期，监控任务完成情况。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>风险管理</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>识别和评估项目风险，制定应对策略，降低风险对项目的影响。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-section">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>资源管理</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>管理项目资源分配，优化资源使用，避免资源冲突和过度分配。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>文档管理</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>上传和管理项目文档，控制文档版本，方便团队成员访问和共享。</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <template #header>
            <div class="feature-header">
              <h3>报表分析</h3>
            </div>
          </template>
          <div class="feature-content">
            <p>生成项目进度报表和分析图表，帮助决策者了解项目状态和趋势。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'HomeView',
  setup() {
    const router = useRouter()
    
    const goToLogin = () => {
      router.push('/login')
    }
    
    const goToRegister = () => {
      router.push('/register')
    }
    
    return {
      goToLogin,
      goToRegister
    }
  }
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.welcome-section {
  text-align: center;
  padding: 60px 0;
}

.welcome-section h1 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 20px;
}

.welcome-section p {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.feature-section {
  margin-bottom: 30px;
}

.feature-header {
  display: flex;
  align-items: center;
}

.feature-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.feature-content {
  min-height: 100px;
}

.el-card {
  height: 100%;
  margin-bottom: 20px;
}
</style>